<style scoped>
    .add_bank_card_page {
        width: 800px;
        height: 30px;
        margin: 10px auto;
    }
    .add_bank_card_form {
        width: 625px;
        margin: 20px auto;
    }
    .xbn-avatar-uploader .nt-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .xbn-avatar-uploader .nt-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #dddddd;
        width: 138px;
        height: 138px;
        line-height: 138px;
        text-align: center;
        border: 1px dashed #ddd;
        border-radius: 2px;
    }
    .avatar {
        width: 138px;
        height: 138px;
        display: block;
    }
</style>
<template>
    <div>
        <nt-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="add_bank_card_form">
            <nt-form-item label="公司名：" prop="company_name">
                <nt-input v-model="ruleForm.company_name" placeholder="请输入公司名" :maxlength="40" />
            </nt-form-item>
            <nt-form-item label="公司注册号：" prop="registration_number">
                <nt-input v-model="ruleForm.registration_number" placeholder="请输入公司注册号" :maxlength="40" />
            </nt-form-item>
            <nt-form-item label="营业执照：" prop="business_license">
                <span class="col_cccccc">请确保上传资料文字清晰可见，最大不超过2M，格式为JPG,JPEG,PNG。</span>
                <nt-upload class="xbn-avatar-uploader" action="http://timage.xbniao.com/file/app/image.upload" :show-file-list="false" :on-success="handleAvatarSuccessBL"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.business_license" :src="ruleForm.business_license" class="avatar">
                    <i v-else class="nt-icon-plus avatar-uploader-icon"></i>
                </nt-upload>
            </nt-form-item>
            <nt-form-item label="法人身份证正面照片：" prop="corporate_identity_card0">
                <span class="col_cccccc">请确保上传资料文字清晰可见，最大不超过2M，格式为JPG,JPEG,PNG。</span>
                <nt-upload class="xbn-avatar-uploader" action="http://timage.xbniao.com/file/app/image.upload" :show-file-list="false" :on-success="handleAvatarSuccess0"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.corporate_identity_card0" :src="ruleForm.corporate_identity_card0" class="avatar">
                    <i v-else class="nt-icon-plus avatar-uploader-icon"></i>
                </nt-upload>
            </nt-form-item>
            <nt-form-item label="法人身份证反面照片：" prop="corporate_identity_card1">
                <span class="col_cccccc">请确保上传资料文字清晰可见，最大不超过2M，格式为JPG,JPEG,PNG。</span>
                <nt-upload class="xbn-avatar-uploader" action="http://timage.xbniao.com/file/app/image.upload" :show-file-list="false" :on-success="handleAvatarSuccess1"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.corporate_identity_card1" :src="ruleForm.corporate_identity_card1" class="avatar">
                    <i v-else class="nt-icon-plus avatar-uploader-icon"></i>
                </nt-upload>
            </nt-form-item>
            <nt-form-item label="">
                <nt-button class="add_bank_card_next w240" type="success" @click="submitForm()">{{submit_text}}
                </nt-button>
            </nt-form-item>
        </nt-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    company_name: '',
                    registration_number: '',
                    business_license: '',
                    corporate_identity_card0: '',
                    corporate_identity_card1: '',
                },
                rules: {
                    company_name: [
                        { required: true, message: '请输入公司名', trigger: 'blur' },
                    ],
                    registration_number: [
                        { required: true, message: '请输入公司注册号', trigger: 'blur' },
                    ],
                    business_license: [
                        { required: true, message: '请添加营业执照', trigger: 'change' }
                    ],
                    corporate_identity_card0: [
                        { required: true, message: '请添加法人身份证正面照片', trigger: 'change' },
                    ],
                    corporate_identity_card1: [
                        { required: true, message: '请添加法人身份证反面照片', trigger: 'change' },
                    ],
                },
                submit_text: '下一步',
            }
        },

        components: {

        },

        created: async function () {

        },

        methods: {
            submitForm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleAvatarSuccessBL(res, file) {
                this.ruleForm.business_license = URL.createObjectURL(file.raw);
                this.submitForm();
            },
            handleAvatarSuccess0(res, file) {
                this.ruleForm.corporate_identity_card0 = URL.createObjectURL(file.raw);
                this.submitForm();
            },
            handleAvatarSuccess1(res, file) {
                this.ruleForm.corporate_identity_card1 = URL.createObjectURL(file.raw);
                this.submitForm();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>